<template>
    <div>
        <el-card v-loading="loading">
            <div slot="header" class="header">
                <el-avatar :size="60">
                    <el-image :src="formAdd.headimg_url" style="width: 60px; height: 60px">
                    </el-image>
                </el-avatar>
                <div class="header__right">
                    <div class="header__right-top">
                        <span> {{ formAdd.realname }}</span>
                        <el-tag size="small">{{ formAdd.age }}岁</el-tag>
                        <!--                        <img :src="sexUrl" alt="">-->
                        <el-tag size="small" style="margin-left: 3px;">{{ formAdd.genders }}</el-tag>
                        <el-tag size="small" style="margin-left: 3px;">{{ formAdd.role_name }}</el-tag>
                        <el-tag size="small" style="margin-left: 3px;">{{ formAdd.status }}</el-tag>
                    </div>
                    <div class="header__right-bottom">
                        <div class="header__right-bottom-right">
                            <span>员工账号: {{ formAdd.account }}</span>
                        </div>
                        <div>
                            <pers-button icon="" size="mini" @click="allocate()" perms="kanke:education:teacher:assign-classes"
                                type="primary" label="分配班级"></pers-button>
                            <pers-button icon="" size="mini" @click="edit()" perms="kanke:education:teacher:edit" type=""
                                label="编辑"></pers-button>

                        </div>
                    </div>

                </div>

            </div>
            <el-descriptions class="margin-top" :column="4">
                <el-descriptions-item label="手机号码">{{ formAdd.mobile }}</el-descriptions-item>
                <el-descriptions-item label="员工昵称">{{ formAdd.nickname }}</el-descriptions-item>
                <el-descriptions-item label="员工角色">{{ formAdd.role_name }}</el-descriptions-item>
                <el-descriptions-item label="员工生日">{{ formAdd.birthday }}</el-descriptions-item>
                <el-descriptions-item label="所在班级">{{ formAdd.class_name }} </el-descriptions-item>
                <el-descriptions-item label="居住城市"> - </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <AssignClass v-if='showAssign' :visible.sync="showAssign" @handleReload="init()" :id="formAdd.id" />
        <AddForm v-if="showForm" :visible.sync="showForm" @handleReload="init()" :id="formAdd.id" />
    </div>

</template>

<script>
import {hasPermission, isShow} from '@/common/permission';
import { getTeacherDetail, edit } from "@/api/kanke/teacher/teacher";
import { getClassData } from "@/api/kanke/gradeclass/gradeclass";
import AssignClass from './components/AssignClass.vue';
import AddForm from "@/views/kanke/education/teacher/components/AddForm";
let _that;

export default {
    name: 'TeacherDetail',
    components: {
        AssignClass,
        AddForm
    },
    data() {
        return {
            loading: false,
            openAdd: false,
            formAdd: {
                headimg_url: '',
                realname: '',
                nickname: '',
                account: '',
                mobile: '',
                class_name: '暂无班级',
                role_name: '',
                birthday: '',
                teacher_name: '',
                age: 0,
                gender: 0,
                genders: '',//男 女
                status: '',
                classList: [],
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                //new add
                id: '',  //员工id
                role_id: '',
                class_ids: [],
                class_names: [],
                readonly: true,
                roleList: [{ 'id': 19, 'role_name': '科目主管' }],
            },
            showAssign: false,
            assignId: 0,   // 员工id
            showForm: false  //编辑
        }
    },
    created() {
        _that = this;
        this.formAdd.id = this.$route.query.id;
        _that.init(true);
        _that.getClassData();
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            _that.loading = true;
            // console.log('init', _that.form);
            getTeacherDetail({ id: this.formAdd.id }).then((res) => {
                console.log(res)
                _that.formAdd.nickname = res.data.nickname;
                _that.formAdd.realname = res.data.realname;
                _that.formAdd.account = res.data.account
                _that.formAdd.mobile = res.data.mobile;
                _that.formAdd.gender = res.data.gender;
                _that.formAdd.class_name = res.data.class_name;
                _that.formAdd.class_names = res.data.class_names;
                _that.formAdd.class_ids = res.data.class_ids;
                _that.formAdd.role_name = res.data.role_name;
                _that.formAdd.role_id = res.data.role_id;
                //_that.formAdd.roleList = res.data.roleList;
                _that.formAdd.birthday = res.data.birthday;
                _that.formAdd.teacher_name = res.data.teacher_name;
                _that.formAdd.headimg_url = res.data.headimg_url;
                _that.formAdd.age = res.data.age;
                _that.formAdd.genders = res.data.genders;
                _that.formAdd.status = res.data.status;
                _that.loading = false;
            })
        },
        returnList: function () {
            this.$router.push({ path: 'kanke/education/teacher/index' });
        },
        getClassData() {
            getClassData().then((res) => {
                console.log('classinfo', res);
                _that.classList = res.data.list;
            })
        },
        allocate() {
            this.showAssign = true;
            this.assignId = this.formAdd.id;
        },
        edit() {
            _that.showForm = true;
        },
        cleanDiaglog() {
            this.isShowPic = false;
        },
        selectImgs(res) {
            this.formAdd.headimg_url = res[0].urls
            this.isShowPic = false;
        },
        linkTeacherDetail: function (data) {
            this.$router.push({ path: '/kanke/teacher/detail', query: { liveId: data.id } });
        },
    }
}


</script>

<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 300px;
    }
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.round-image {
    width: 55px;
    /* 或者你想要的大小 */
    height: 45px;
    /* 和宽度相同 */
    border-radius: 50%;
    /* 使得图片变为圆形 */
    overflow: hidden;
    /* 超出容器的图片部分将被隐藏 */
}

.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &__right {
        flex: 1;
        margin-left: 20px;

        &-top {
            display: flex;
            align-items: center;
            justify-content: flex-start;

            // 第一个子元素
            :first-child {
                margin-right: 10px;
            }

            img {
                width: 30px;
                margin: 0 10px;
            }

        }

        &-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;

            &-right {
                display: flex;
                align-items: center;

                .star {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    img {
                        width: 25px;
                        margin: 0 10px 0 20px;
                    }
                }

                .snow {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    img {
                        width: 30px;
                        margin: 0 0 0 20px;
                    }
                }
            }
        }

    }
}
</style>